<template>
    <div v-if="fixedBottom"
      class="tw-libdiv"
      v-fix:bottom
      @mouseenter="$emit('mouseenter', {event: $event})"
      @mouseleave="$emit('mouseleave', {event: $event})">
      <slot></slot>
    </div>
    <div v-else
      class="tw-libdiv"
      v-fix="isFixed && fixedDistance"
      @mouseenter="$emit('mouseenter', {event: $event})"
      @mouseleave="$emit('mouseleave', {event: $event})">
      <slot></slot>
    </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'
import padding from '../tw-lib-base/padding/mixins'

export default {
  name: 'header-navigate',

  props,

  mixins: [style, border, padding],

  computed: {
    style () {
      return Object.assign({
        minHeight: this.minWidth,
        maxHeight: this.maxHeight,
        minWidth: this.minWidth,
        maxWidth: this.maxWidth,
        bg: this.bg,
        bgColor1: this.bgColor1,
        bgColor2: this.bgColor2,
        bgGradientDeg: this.bgGradientDeg,
        bgImage: this.bgImage[0],
        bgImageAlign: this.bgImageAlign,
        bgImageSize: this.bgImageSize,
        bgPosition: this.bgPosition,
        bgIsRepeat: this.bgIsRepeat,
        enableMediaQuery: this.enableMediaQuery,
        mediaPointLength: this.mediaPoint.length,
        mediaPointWidthLength: this.mediaPointWidth.length,
        shadowColor: this.shadowColor,
        hideOverflowContent: this.hideOverflowContent,
        bottom: this.bottom,
        isFlex: this.isFlex,
        widthRate: this.widthRate,
        enableScroll: this.enableScroll
      }, this.paddingStyle, this.borderStyle)
    }
  },

  methods: {
    setStyle () {
      // ::root 表示组件根元素选择器
      let bgImage = 'none'

      // background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)), url("../../media/examples/lizard.png");

      if (this.bgImage[0]) {
        bgImage = `url("${this.$twApp.fileBaseUrl}${this.bgImage[0].localPath}")`
      }

      if (this.bgColor1) {
        if (bgImage === 'none') {
          bgImage = `linear-gradient(${this.bgGradientDeg}deg, ${this.bgColor1}, ${this.bgColor2 || this.bgColor1})`
        } else {
          bgImage += `, linear-gradient(${this.bgGradientDeg}deg, ${this.bgColor1}, ${this.bgColor2 || this.bgColor1})`
        }
      }

      let style = `
        ::root.tw-libdiv {
          padding: ${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft};
          background-color: ${this.bg || 'transparent'};
          background-image: ${bgImage};
          background-position: ${this.bgImageAlign} center;
          background-size: ${this.bgImageSize};
          background-origin: ${this.bgPosition};
          box-shadow: ${this.shadowColor ? `0 2px 9px ${this.shadowColor}` : 'none'};
        }
      `

      if (this.minHeight) {
        style += `
        ::root.tw-libdiv {
            min-height: ${this.minHeight};
          }
        `
      }

      if (this.maxHeight) {
        style += `
        ::root.tw-libdiv {
            max-height: ${this.maxHeight};
          }
        `
      }

      if (this.minWidth) {
        style += `
        ::root.tw-libdiv {
            min-width: ${this.minWidth};
          }
        `
      }

      if (this.maxWidth) {
        style += `
        ::root.tw-libdiv {
            max-width: ${this.maxWidth};
          }
        `
      }

      if (this.hideOverflowContent) {
        style += `
        ::root.tw-libdiv {
            overflow: hidden;
          }
        `
      }

      if (this.bgIsRepeat) {
        style += `
        ::root.tw-libdiv {
            background-repeat: repeat;
          }
        `
      }

      if (this.isFlex) {
        style += `
        ::root.tw-libdiv {
            display: flex;
          }
        `
      }

      if (this.widthRate) {
        style += `
        ::root.tw-libdiv {
            flex: ${this.widthRate};
          }
        `
      }

      if (this.enableMediaQuery && this.mediaPoint && this.mediaPoint.length > 0) {
        for (let i = 0; i < this.mediaPoint.length; i++) {
          style += `
            @media (min-width: ${this.mediaPoint[i]}) {
              ::root.tw-libdiv {
                width: ${this.mediaPointWidth[i]};
              }
            }
          `
        }
      }

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
            ::root.tw-libdiv {
              border-top: ${border};
            }
          `
        }

        if (this.borderPosition.includes(1)) {
          style += `
            ::root.tw-libdiv {
              border-bottom: ${border};
            }
          `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root.tw-libdiv {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root.tw-libdiv {
              border-right: ${border};
            }
          `
        }

        style += `
          ::root.tw-libdiv {
            border-radius: ${this.borderRadius};
          }
        `
      }

      if (this.enableScroll) {
        style += `
          ::root.tw-libdiv {
            ::root.tw-libdiv {
          }
        `
      }

      this.addStyle(style)
    },

    computeMinHeight () {
      if (this.bottom) {
        this.$el.style.minHeight = window.innerHeight - this.$el.getBoundingClientRect().top - parseInt(this.bottom) + 'px'
      }
    }
  },

  mounted () {
    this.computeMinHeight()
  },

  watch: {
    bottom () {
      this.computeMinHeight()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
